<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>组件和v-for</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>

<body>
  <div id="todo-list">
    <input type="text" v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="添加一个列表">
    <ul>
      <li is="todo-item" v-for="(todo,index) in todos" v-bind:title="todo" v-on:remove="todos.splice(index,1)"></li>
    </ul>
  </div>
  <script type="text/javascript">
  // 注册一个组件
  Vue.component('todo-item', {

    template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">X</button>\
    </li>\
  ',
    props: ['title']
  });
  // 创建一个新vue对象
  new Vue({
    el: "#todo-list",
    data: {
      newTodoText: "",
      todos: [
        '第1条列表',
        '第2条列表',
        '第3条列表'

      ]
    },
    methods: {
      addNewTodo: function() {
        this.todos.push(this.newTodoText);
        this.newTodoText = '';
      }
    }
  });
  </script>
</body>

</html>
